{% extends 'base/base.html' %}

{% block title %}项目管理 - 多用户报警系统{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>
            <i class="fa fa-folder-open-o" aria-hidden="true"></i> 项目管理
        </h1>
        <div class="d-flex gap-2">
            {% if user.is_staff %}
                <a href="{% url 'projects:announcement_list' %}" class="btn btn-info">
                    <i class="fa fa-bullhorn" aria-hidden="true"></i> 公告管理
                </a>
            {% endif %}
            <a href="{% url 'projects:project_create' %}" class="btn btn-primary">
                <i class="fa fa-plus" aria-hidden="true"></i> 创建项目
            </a>
        </div>
    </div>
    
    {% if projects %}
        <div class="row">
            {% for project in projects %}
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="h5 mb-0">{{ project.name }}</h3>
                            <span class="role-badge role-{{ project.user_role }}">{{ project.get_user_role_display }}</span>
                        </div>
                        <div class="card-body">
                            {% if project.description %}
                                <p class="text-muted mb-3">{{ project.description|truncatechars:100 }}</p>
                            {% else %}
                                <p class="text-muted mb-3"><i class="fa fa-info-circle" aria-hidden="true"></i> 暂无项目描述</p>
                            {% endif %}
                            <div class="mb-3">
                                <div class="text-sm text-muted">
                                    <span class="mr-3"><i class="fa fa-user-o" aria-hidden="true"></i> {{ project.created_by.username }}</span>
                                    <span><i class="fa fa-clock-o" aria-hidden="true"></i> {{ project.created_at|date:"Y年m月d日 H:i:s" }}</span>
                                </div>
                            </div>
                            {% if project.tags.count > 0 %}
                                <div class="mb-3">
                                    {% for tag in project.tags.all|slice:5 %}
                                        <span class="tag" style="background-color: {{ tag.color }};">{{ tag.name }}</span>
                                    {% endfor %}
                                    {% if project.tags.count > 5 %}
                                        <span class="tag bg-gray-500">+{{ project.tags.count|add:"-5" }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                        <div class="card-footer bg-white border-top d-flex justify-content-between">
                            <a href="{% url 'projects:project_detail' project.id %}" class="btn btn-primary btn-sm">
                                <i class="fa fa-eye" aria-hidden="true"></i> 查看详情
                            </a>
                            {% if project.user_role == 'admin' or project.user_role == 'developer' %}
                                <div class="d-flex gap-2">
                                    <a href="{% url 'projects:project_update' project.id %}" class="btn btn-warning btn-sm">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                    </a>
                                    {% if project.user_role == 'admin' %}
                                        <a href="{% url 'projects:project_delete' project.id %}" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除此项目吗？删除后将无法恢复。');">
                                            <i class="fa fa-trash" aria-hidden="true"></i> 删除
                                        </a>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        
        <!-- 分页 -->
        {% if is_paginated %}
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                        {% else %}
                            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    {% else %}
        <div class="card">
            <div class="card-body text-center py-8">
                <i class="fa fa-folder-open-o" aria-hidden="true" style="font-size: 4rem; color: #d9d9d9;"></i>
                <h3 class="mt-4 text-muted">还没有项目</h3>
                <p class="text-muted mb-6">创建您的第一个项目，开始管理您的报警系统</p>
                <a href="{% url 'projects:project_create' %}" class="btn btn-primary">
                    <i class="fa fa-plus" aria-hidden="true"></i> 创建第一个项目
                </a>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为卡片添加悬停效果
        const cards = document.querySelectorAll('.card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.15)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)';
            });
        });
        
        // 为删除按钮添加确认提示
        const deleteButtons = document.querySelectorAll('.btn-danger');
        deleteButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                if (!confirm('确定要删除此项目吗？删除后将无法恢复。')) {
                    e.preventDefault();
                }
            });
        });
    });
</script>
{% endblock %}